<template>
	<div>
		<el-row>
			<el-col :span="16">
				<el-form :model="addTimeformDataMain" ref="tempPriceEnabled" label-width="180px">
					<el-form-item label="临时加倍" prop="tempPriceEnabled">
						<el-radio v-model="addTimeformDataMain.tempPriceEnabled" :label="1">开启</el-radio>
						<el-radio v-model="addTimeformDataMain.tempPriceEnabled" :label="0">关闭</el-radio>
					</el-form-item>

					<el-form-item label="" prop="tempPriceRate" v-if="addTimeformDataMain.tempPriceEnabled==1">
						<el-radio v-model="addTimeformDataMain.tempPriceEnabled" :label="1">
							订单金额以基础费用的
							<el-input v-model="addTimeformDataMain.tempPriceRate" placeholder="请输入">
								<template slot="append">%</template>
							</el-input>
							<span class="pl10 cl000">计算</span>
						</el-radio>
					</el-form-item>
					<el-form-item label="" prop="tempPriceRate" v-if="addTimeformDataMain.tempPriceEnabled==1">
						<el-radio v-model="addTimeformDataMain.tempPriceEnabled" :label="1">
							订单金额以基础费用的
							<el-input v-model="addTimeformDataMain.tempAddPrice" placeholder="请输入">
								<template slot="append">元</template>
							</el-input>
							<span class="pl10 cl000">计算</span>
						</el-radio>
					</el-form-item>
					<el-form-item label="临时加价起止时间" prop="type" v-if="addTimeformDataMain.tempPriceEnabled==1">
						<el-button type="text" @click="addTime('add')">
							新增时间段
						</el-button>
						<div v-for="(itemtime,index) in timeArr">
							<span class="mr10">{{ itemtime.startTime }}至{{ itemtime.endTime }}</span>
							<span class="mr10">{{ itemtime.tempPriceType==1?'恶劣天气':itemtime.tempPriceType==1?'节假日':"其他" }}</span>
							<el-button type="text" @click="addTime('edit',itemtime,index)">
								编辑
							</el-button>
							<el-button type="text" @click="addTime('del',itemtime,index)">
								删除
							</el-button>
						</div>

					</el-form-item>
				</el-form>

			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="saveConfiguration">保存配置</el-button>
			</el-col>
		</el-row>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>价格表</span>
				<el-button style="float: right; padding: 3px 0" type="text" @click="addPriceList('add')">
					添加价格表
				</el-button>
			</div>
			<el-table v-loading="tableDataLoading" :data="tableData">
				<el-table-column v-for='(s, i) in tableOption' :key='i' :prop='s.prop' :label='s.label'
								 :min-width='s.width'
								 align='center'/>
				<el-table-column label='操作' prop='enabled' fixed='right' width='300'>
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="addPriceList('edit',scope.row)">编辑
						</el-button>
						<el-button size="mini" type="danger"
								   @click="addPriceList('del',scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!--	添加时间弹窗-->
		<el-dialog :title="addTimeform.titleName" :visible.sync="addTimeform.dialogFormVisible" width="500px">
			<el-form :model="addTimeformData" :rules="addTimeform.rules" ref="addTimeformData" label-width="80px">
				<el-form-item label="加价原因" prop="tempPriceType">
					<el-select class="w200" v-model="addTimeformData.tempPriceType" placeholder="请选择">
						<el-option
							v-for="item in reason"
							:key="item.type"
							:label="item.text"
							:value="item.type">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="加价时间" prop="startTime">
					<el-date-picker
						@change="changetime"
						v-model="allTime"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelTime">取 消</el-button>
				<el-button type="primary" @click="submitTime">确 定</el-button>
			</div>
		</el-dialog>
		<!--	添加价格表弹窗-->
		<el-dialog :title="priceList.titleName" :visible.sync="priceList.dialogFormVisible" width="1200px">
			<el-form :model="priceListDate"  ref="ruleForm" label-width="80px">
				<el-form-item label="名称" prop="name">
					<el-input v-model="priceListDate.name" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="收费节点" prop="chargeType">
					<el-radio v-model="priceListDate.chargeType" :label="0">用户发单时间</el-radio>
					<el-radio v-model="priceListDate.chargeType" :label="1">司机接单时间</el-radio>
					<el-radio v-model="priceListDate.chargeType" :label="2">开始服务时间</el-radio>
					<p class="clf7d196">说明:以选择的节点来对应服务时间内的收费标准。</p>
				</el-form-item>
				<el-card class="mb40">
					<div slot="header" class="clearfix">
						<span></span>
						<el-button style="float: right; padding: 3px 0" type="text" @click="newServiceHours('add')">
							新增服务时间段
						</el-button>
					</div>
					<el-card v-for="(priceListDateitem,priceListDateIndex) in priceListDate.priceConfigItemList"
							 class="mt20"
							 :key="priceListDateIndex">
						<div slot="header" class="clearfix">
							<span></span>
							<el-button v-if="priceListDateIndex!=0" style="float: right; padding: 3px 0" type="text"
									   @click="newServiceHours('del',priceListDateIndex)">
								删除服务时间段
							</el-button>
						</div>
						<el-row>
							<el-col :span="24">
								<el-form-item label="服务时间" prop="type">
									<el-time-picker
										is-range
										@change="changetimemain($event,priceListDateIndex)"
										value-format="HH:mm:ss"
										v-model="priceListDateitem.startTimeAlL"
										range-separator="至"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										placeholder="选择时间范围">
									</el-time-picker>
								</el-form-item>
							</el-col>
							<el-col :span="7">
								<el-form-item prop="initTime" label="起步公里">
									<el-input v-model="priceListDateitem.initTime" placeholder="请输入公里数" class="w200">
										<template slot="append">公里</template>
									</el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item prop="initPrice" label="起步价">
									<el-input v-model="priceListDateitem.initPrice" placeholder="请输入金额" class="w200">
										<template slot="append">元</template>
									</el-input>
								</el-form-item>
							</el-col>
							<!--							<el-col :span="24">-->
							<!--								<el-form-item label="附加">-->
							<!--									<el-input v-model="priceListDateitem.overMin" placeholder="请输入内容"-->
							<!--											  class="w200">-->
							<!--										<template slot="append">公里</template>-->
							<!--									</el-input>-->
							<!--									以上,每-->
							<!--									<el-input v-model="priceListDateitem.minCout" placeholder="请输入内容"-->
							<!--											  class="w200">-->
							<!--										<template slot="append">公里</template>-->
							<!--									</el-input>-->
							<!--									加收：-->
							<!--									<el-input v-model="priceListDateitem.minPrice" placeholder="请输入内容"-->
							<!--											  class="w200">-->
							<!--										<template slot="append">元</template>-->
							<!--									</el-input>-->
							<!--								</el-form-item>-->
							<!--							</el-col>-->
							<el-col :span="24">
								<el-form-item prop="type" label="附加">
									<div v-for="(FJListitem, FJListindex) in priceListDateitem.priceItemList"
										 :key="FJListindex"
										 class="mb20">
										<el-row>
											<el-col :span="20">
												<el-input v-model="FJListitem.overMin" placeholder="请输入内容"
														  class="w200">
													<template slot="append">公里</template>
												</el-input>
												以上,每
												<el-input v-model="FJListitem.minCount" placeholder="请输入内容"
														  class="w200">
													<template slot="append">公里</template>
												</el-input>
												加收：
												<el-input v-model="FJListitem.minPrice" placeholder="请输入内容"
														  class="w200">
													<template slot="append">元</template>
												</el-input>
											</el-col>
											<el-col :span="2">
												<el-button type="text" v-if="FJListindex!=0"
														   @click="additem('del',priceListDateIndex,FJListindex)">
													移除规则
												</el-button>
											</el-col>
										</el-row>
									</div>
									<el-button type="primary" @click="additem('add',priceListDateIndex,null)"
											   class="ml20 mt20" style="width: 75%">
										添加附加规则
									</el-button>
								</el-form-item>
							</el-col>

						</el-row>
					</el-card>
				</el-card>
				<el-row>
					<el-col :span="24">
						<el-form-item label="免费等候" prop="freeWait">
							<el-input v-model="priceListDate.freeWait" placeholder="请输入免费等候分钟" class="w200">
								<template slot="append">分钟</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="超出后每" prop="overTime">
							<el-input v-model="priceListDate.overTime" placeholder="请输入分钟数" class="w200">
								<template slot="append">分钟</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="加收" prop="overFee">
							<el-input v-model="priceListDate.overFee" placeholder="请输入金额" class="w200">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelPriceList">取 消</el-button>
				<el-button type="primary" @click="submitPriceList">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'priceListSsetting',
	data () {
		return {
			addTimeform: {
				titleName: '',
				dialogFormVisible: false,
				form: {},
				rules: {
					tempPriceType: [
						{required: true, message: '请选择加价原因', trigger: 'change'},
					],
					startTime: [
						{required: true, message: '请选择加价时间', trigger: 'change'},
					]
				}
			},
			addTimeformDataMain: {
				tempPriceEnabled: 0,
				tempPriceRate: null,
				tempAddPrice: null,
				tempPriceTimeDetailList: [],
			},
			allTime: [],
			addTimeformData: {
				startTime: null,
				tempPriceType: null,
				endTime: null,
			},
			picReason: '',
			picReasontime: '',
			reason: [
				{
					text: '恶劣天气',
					type: 1,
				},
				{
					text: '节假日',
					type: 2,
				},
				{
					text: '其他',
					type: 3,
				}
			],
			timeArr: [
				{
					time1: '',
					time2: '',
					reason: ''
				}
			],
			tableDataLoading: false,
			tableData: [],
			tableOption: [
				{label: '价格表名称', prop: 'name'}
			],
			priceListDate: {
				name: '',
				chargeType: null,
				freeWait: null,
				overTime: null,
				overFee: null,
				priceConfigItemList: [
					{
						startTime: null,
						endTime: null,
						initTime:null,
						initPrice: null,
						priceItemList: [
							{
								overMin: null,
								minCount: null,
								minPrice:null,
							}
						]

					}
				]
			},
			priceList: {
				titleName: '',
				dialogFormVisible: false,
				form: {},
				rules: {
					type: [
						{required: true, message: '请选择原因类型', trigger: 'change'},
					],
					reason: [
						{required: true, message: '请输入原因', trigger: 'blur'},
					],
				}
			}
		}
	},
	methods: {
		//服务时间修改
		changetimemain(e,index){
			console.log('服务时间修改',e)
			if(e && e.length){
				this.priceListDate.priceConfigItemList[index].startTime=e[0]
				this.priceListDate.priceConfigItemList[index].endTime=e[1]
			}else{
				this.priceListDate.priceConfigItemList[index].startTime=""
				this.priceListDate.priceConfigItemList[index].endTime=""
			}
		},
		common () {
			// 获取配置详情
			this.$http({
				url: this.$http.adornUrl('/sys/price/getTempPriceConfig'),
				method: 'get',
			}).then(res => {
				console.log('获取配置详情',res)
				if (res.data.data) {
					this.addTimeformDataMain = res.data.data
					this.timeArr = res.data.data.tempPriceTimeDetailList
				} else {
					this.$message({
						message: res.msg,
						type: 'error',
						duration: 1500
					})
				}

			})
		},
		getList () {
			this.tableDataLoading = true
			this.$http({
				url: this.$http.adornUrl('sys/price/list'),
				method: 'get',
			}).then(({
				data
			}) => {
				console.log('getTempPriceConfig2', data)
				if (data && data.data && data.data) {
					this.tableDataLoading = false
					this.tableData = data.data
				} else {
					this.tableData = []
					this.$message({
						message: data.msg,
						type: 'error',
						duration: 1500
					})
				}
			}).finally(() => {
				this.tableDataLoading = false
			})
		},

		//修改时间点
		changetime (e) {
			if (e && e.length) {
				this.addTimeformData.startTime = e[0]
				this.addTimeformData.endTime = e[1]
			} else {
				this.addTimeformData.startTime = null
				this.addTimeformData.endTime = null
			}
		},
		//新增服务时间段
		newServiceHours (state, item, index) {
			switch (state) {
				case 'add':
					this.priceListDate.priceConfigItemList.push({
						startTimeAlL: [],
						startTime: null,
						endTime: null,
						initTime: null,
						initPrice: null,
						overMin: null,
						minCount: null,
						minPrice: null,
						priceItemList: [
							{
								overMin: 30,
								minCount: 1,
								minPrice: 1.1
							}
						]
					})
					break
				case 'del':
					this.priceListDate.priceConfigItemList.splice(index, 1)
					break
			}
		},
		//新增价格表
		addPriceList (state, item) {
			switch (state) {
				case 'add':
					this.priceList.dialogFormVisible = true
					this.priceList.titleName = '新增价格表'
					this.priceListDate={
						name: '',
						chargeType: null,
						freeWait: null,
						overTime: null,
						overFee: null,
						priceConfigItemList: [
							{
								startTime: null,
								endTime: null,
								initTime:null,
								initPrice: null,
								priceItemList: [
									{
										overMin: null,
										minCount: null,
										minPrice:null,
									}
								]

							}
						]
					}
					break
				case 'edit':
					this.priceList.dialogFormVisible = true
					this.priceList.titleName = '编辑价格表'
					this.$http({
						url: 'sqx_fast/sys/price/detail',
						method: 'get',
						params: {
							'id': item.id
						}
					}).then(res => {
						console.log('详情res',res)
						this.priceListDate=res.data.data
						if(res.data.data.priceConfigItemList && res.data.data.priceConfigItemList.length){
							this.priceListDate.priceConfigItemList=res.data.data.priceConfigItemList.map(item=>{
								return{
									...item,
									startTimeAlL:[item.startTime,item.endTime]
								}
							})
						}
						console.log('this.priceListDate',this.priceListDate.priceConfigItemList)
						this.$set(this,'priceListDate',this.priceListDate)
					})

					break
				case 'del':
					this.delitem(item)
					break
			}

		},
		delitem (item) {
			this.$confirm(`确定删除此条信息?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: "/sqx_fast/sys/price/delete",
					method: 'get',
					params:{id:item.id}
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getList()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
						})
					}
				})
			}).catch(() => {
			})
		},
		//新增附加选项
		additem (state, parindex, index) {
			console.log('state, parindex,index', state, parindex, index)
			switch (state) {
				case 'add':
					this.priceListDate.priceConfigItemList[parindex].priceItemList.push({
						overMin: null,
						minCount: null,
						minPrice: null
					})
					break
				case 'del':
					this.priceListDate.priceConfigItemList[parindex].priceItemList.splice(index, 1)
					break
			}
		},
		//取消
		cancelPriceList () {
			this.priceList.dialogFormVisible = false
			this.priceList.titleName = ''
			this.priceListDate = {
				startTimeAlL: [],
				startTime: null,
				endTime: null,
				initTime: null,
				initPrice: null,
				overMin: null,
				minCount: null,
				minPrice: null,
				priceItemList: [
					{
						overMin: null,
						minCount: null,
						minPrice: null
					}
				]
			}
			this.getList()
		},
		submitPriceList () {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					if(this.priceListDate.id){
						this.$http({
							url: this.$http.adornUrl('sys/price/update'),
							method: 'post',
							data: this.priceListDate
						}).then(res => {
							if(res.data.code==0){
								this.$message({
									message: "更新成功",
									type: 'success',
									duration: 1500
								})
								this.cancelPriceList()
							}else{
								this.$message({
									message: res.msg,
									type: 'error',
									duration: 1500
								})
								this.cancelPriceList()
							}
						})
					}else{
						this.$http({
							url: this.$http.adornUrl('sys/price/add'),
							method: 'post',
							data: this.priceListDate
						}).then(res => {
							if(res.data.code==0){
								this.$message({
									message: "更新成功",
									type: 'success',
									duration: 1500
								})
								this.cancelPriceList()
							}else{
								this.$message({
									message: res.msg,
									type: 'error',
									duration: 1500
								})
								this.cancelPriceList()
							}
						})
					}

				}
			})

		},
		//新增时间段
		addTime (state, item, index) {
			switch (state) {
				case 'add':
					this.allTime = []
					this.addTimeform.dialogFormVisible = true
					this.addTimeform.titleName = '新增加价时间段'
					this.addTimeformData = {
						startTime: null,
						tempPriceType: null,
						endTime: null,
					}
					this.$nextTick(() => {
						this.$refs.addTimeformData.clearValidate()
					})
					break
				case 'edit':
					console.log('edititem', item)
					this.allTime = [item.startTime, item.endTime]
					this.addTimeform.dialogFormVisible = true
					this.addTimeform.titleName = '修改加价时间段'
					this.addTimeform.index = index
					this.addTimeformData = item
					this.$nextTick(() => {
						this.$refs.addTimeformData.clearValidate()
					})
					break
				case 'del':
					this.timeArr.splice(item, 1)
					break
			}
		},
		submitTime () {
			if (this.addTimeform.titleName != '修改加价时间段') {
				this.timeArr.push({
					startTime: this.addTimeformData.startTime,
					tempPriceType: this.addTimeformData.tempPriceType,
					endTime: this.addTimeformData.endTime,
				})
			} else {
				this.timeArr[this.addTimeform.index] = {
					startTime: this.addTimeformData.startTime,
					tempPriceType: this.addTimeformData.tempPriceType,
					endTime: this.addTimeformData.endTime,
				}
				let timeArr = this.timeArr
				this.$set(this, 'timeArr', timeArr)
			}
			this.cancelTime()
		},
		cancelTime () {
			this.addTimeform.dialogFormVisible = false
			this.addTimeform.titleName = '加价时间段设置'
			this.allTime = []
			this.addTimeformData = {
				startTime: null,
				tempPriceType: null,
				endTime: null,
			}
		},
		//保存配置
		saveConfiguration () {
			let data = {
				tempPriceEnabled: Number(this.addTimeformDataMain.tempPriceEnabled),
				tempPriceRate: Number(this.addTimeformDataMain.tempPriceRate),
				tempAddPrice: Number(this.addTimeformDataMain.tempAddPrice),
				tempPriceTimeDetailList: this.timeArr,
			}
			this.$http({
				url: this.$http.adornUrl('sys/price/saveTempPriceConfig'),
				method: 'post',
				data: data
			}).then(res => {
				if (res.data.code == 0) {
					this.$message({
						message: '保存成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
						}
					})
				}else{
					this.$message({
						message: res.msg,
						type: 'error',
						duration: 1500,
						onClose: () => {
						}
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.mb20 {
	margin-bottom: 20px;
}

.mr10 {
	margin-right: 10px;
}

.clf7d196 {
	color: #f7d196;
}

.w200 {
	width: 200px !important;
}

.ml20 {
	margin-left: 10px;
}

.mb40 {
	margin-bottom: 40px;
}

.mt20 {
	margin-top: 20px;
}

.pl10 {
	padding-left: 10px;
}

.cl000 {
	color: #000;
}
</style>
